<template>
  <div>
    <h2>Statee Store</h2>
    <p>Count: {{ stateeCount }}</p>
    <p>Double: {{ stateeDouble }}</p>
    <button @click="stateeIncrement">增加 Statee Count</button>

    <hr>

    <h2>Option Store</h2>
    <p>Count: {{ count }}</p>
    <p>My Own Name: {{ myOwnName }}</p>
    <p>Double: {{ double }}</p>
    <p>Magic: {{ magicValue }}</p>
    <button @click="increment">增加 OptionStore Count</button>
  </div>
</template>

<script>
import { useStatee } from "@/stores/Stateexample.js";
import { useOptionStore } from "@/stores/OptionStore.js";
import { mapActions, mapState, mapStores, mapWritableState } from "pinia";

export default {
  name: "MyComponent",
  computed: {
    // Map stores
    ...mapStores(useStatee, useOptionStore),

    // Map state from OptionStore
    ...mapState(useOptionStore, ['count']),
    ...mapState(useOptionStore, {
      myOwnName: 'count',
      double: store => store.count * 2,
      magicValue(store) {
        return this.count + this.double;
      },
    }),

    // Map state from Statee store
    ...mapState(useStatee, {
      stateeCount: 'count',
      stateeDouble: state => state.count * 2,
    }),

    // Map writable state if needed (example)
    ...mapWritableState(useOptionStore, ['count'])
  },
  methods: {
    // Map actions from OptionStore
    ...mapActions(useOptionStore, ["increment"]),

    // Map actions from Statee store
    ...mapActions(useStatee, {
      stateeIncrement: 'increment',
    }),
  },
};
</script>
